<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="jquery-1.10.1.min.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
        }

        img {
            vertical-align: top;
            border: 0;
        }

        .wrap {
            width: 400px;
            height: 400px;
            border: 1px solid #000;
            margin: 100px auto;
            position: relative;
            /* overflow: hidden; */
            user-select: none;
        }

        .wrap .swiper {
            width: 400px;
            height: 400px;
            /* overflow: hidden; */
            position: absolute;
            left: 0;
        }

        .wrap .swiper li {
            width: 400px;
            height: 400px;
            position: absolute;
            left: 0;
        }

        .wrap .swiper li:not(:nth-child(1)) {
            left: 400px;
        }

        .wrap .swiper li img {
            width: 100%;
        }

        .menu {
            position: absolute;
            right: 10px;
            bottom: 10px;
        }

        .menu li {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: #fff;
            margin: 0 10px;
            float: left;
        }

        .menu li.active {
            background-color: pink;
        }

        .left,
        .right {
            position: absolute;
            top: 170px;
            width: 40px;
            height: 60px;
            background-color: #ccc;
            z-index: 999;
            text-align: center;
            line-height: 60px;
        }

        .left {
            left: 0;
        }

        .right {
            right: 0;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="left">左</div>
        <div class="right">右</div>
        <ul class="swiper">
            <li><img src="images/girlbig1.jpg" alt=""></li>
            <li><img src="images/girlbig2.jpg" alt=""></li>
            <li><img src="images/girlbig3.jpg" alt=""></li>
            <li><img src="images/girlbig4.jpg" alt=""></li>

        </ul>
        <div class="menu">
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
        </div>
    </div>
</body>
<script>
    $(function () {
        var index=0
        var beforeindex=0
        var time=null

        function move(){
            if(index>3){
            index=0
          }
          $(".swiper li").eq(beforeindex).animate({left:-400})
          $(".swiper li").eq(index).css({left:400}).stop().animate({left:0})
          $(".menu li").eq(index).addClass("active").siblings().removeClass("active")
          beforeindex=index
        }

        function moveReverse(){
            if(index<0){
                 index=3
             }
             $(".swiper li").eq(beforeindex).animate({left:400})
             $(".swiper li").eq(index).stop().css({left:-400}).animate({left:0})
             $(".menu li").eq(index).addClass("active").siblings().removeClass("active")
             beforeindex=index
        }

        function a(){
            clearInterval(time)
            time=setInterval(function(){
                index++
                move()
            },2000)
        }

        a()

        $(".swiper li").hover(function(){
            clearInterval(time)
        },function(){
            a()
        })

        $(".menu li").click(function(){
            index=$(this).index()
            if(index>beforeindex){
                move()
            }
            else if(index<beforeindex){
                moveReverse() 
            }
        })
        
        $(".right").click(function(){
          index++
          move()
        })
         
         $(".left").click(function(){
             index--
             moveReverse() 
         })
    })
</script>

</html>
